<template>
    <div class="common-layout">
        <el-row>
            <el-col :span="24">
            <el-table :data="state.data" height="800" 
            :cell-class-name="tableCellClassName"
            @sort-change="sortChange"
            :default-sort="state.sort"
            @cell-click="cellClick"
            style="width: 100%">
                <el-table-column prop="startDate" label="开始" sortable width="220"/>
                <el-table-column prop="endDate" label="结束" sortable width="220"/>
                <el-table-column prop="consecutiveDays" label="consecutiveDays" sortable width="160"/>
                <el-table-column prop="pctSum" label="pctSum" sortable width="160">
                    <template #default="scope">
                        {{ scope.row.pctSum.toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="sLp" label="sLp" sortable width="120" />
                <el-table-column prop="eLp" label="eLp" sortable width="120" />
            </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive, watch } from 'vue';
import { useRouteQuery } from '../utils/useRoute';
import { openNewTableDisplay } from '../router';
import { getWeekConsecutiveDataByStock } from '../service/week';
import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';
import { getLpClassName } from '../utils/help';

const base = "DailyDeSum"
const selectKey = base + "Select"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"

const stockSearchStore = weekStockSearch()
let { input } = storeToRefs(stockSearchStore)

const state = reactive({
    stock: "",
    rawData: [],
    data: [],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'lp' , 
        order: sessionStorage.getItem(sortOrderKey) || 'ascending' 
    }

})

let stock = useRouteQuery("stock","")
if(stock) {
    state.stock = stock
    input.value = stock
}

let search = useRouteQuery("search", "")

const loadData = () => {
    getWeekConsecutiveDataByStock(state.stock).then( res => {
        state.rawData = res.data
        state.data = res.data
        state.data.forEach(item => { 
            if (item.consecutiveDays > 0) {
                item.sLp = item.minLp
                item.eLp = item.maxLp
            } else if (item.consecutiveDays < 0) {
                item.sLp = item.maxLp
                item.eLp = item.minLp
            }
        })

        state.data= filterd(state.data)
    })
}

const filterd = (data) => { 
    if (!search) {
        return data
    }

    let op = search.split(";")
    if (op[0] == 'pctSum') {
        if (op[1] == 'gt') {
            return data.filter(item => item.pctSum >= op[2])
        } else {
            return data.filter(item => item.pctSum <= -1 * op[2])
        }
    } else if (op[0] == 'cDays') {
        if (op[1] == 'gt') {
            return data.filter(item => item.consecutiveDays >= op[2])
        } else {
            return data.filter(item => item.consecutiveDays <= -1 * op[2])
        }
    } else {
        return data
    }
}
        
loadData()

// 只监听pinia中某一个值的变化
watch(() => input.value, (newValue, oldValue) => {
    state.stock = newValue
    loadData()
})
const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}


const cellClick = (row, column, cell, event) => {
    let property = column.property
    let val = row[property]

    if (['startDate', 'endDate'].includes(property)) {
        openNewTableDisplay(state.stock, val)
    }
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let property = column.property
    let val = row[property]

    if (property === 'pctSum') {
        if (val < 0) {
            return 'lt0-cell'
        }
    }

    if (property === 'consecutiveDays') {
        if (val <= -4) {
            return 'wugu-lt10-cell'
        } else if (val >= 4) {
            return 'wugu-lt100-cell'
        }
    }

    if (["sLp","eLp"].includes(property)) {
        return getLpClassName(val)
    }

    return ''
}
</script>

<style>
</style>